<template>
	<view class="notes_bigBox">
		<!-- 类轮播图 -->
		<view class="swiper_similar" v-if="notesTip">
			<view class="block_similar">
				<view class="similar">
					<view class="similar_txt" v-for="item,index in notesTip[0]">
						<image class="img" :src="`${item.image}`" mode=""></image>
						<view class="item_name">{{item.name}}</view>
					</view>
				</view>
				<view class="similar border_next">
					<view class="similar_txt" v-for="e,i in notesTip[1]">
						<image v-if="e.image" class="img" :src="`${e.image}`" mode=""></image>
						<view class="item_name">{{e.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 组件 -->

		<compVideo :videoArray="notesList"></compVideo>
		<!-- loading -->
		<compLoad :state = "status"></compLoad>
		<!-- <view class="loading" id="loading" v-show="status">
			<view style="color: #dbbe39" class="la-line-scale-pulse-out-rapid la-2x">
				<view></view>
				<view></view>
				<view></view>
				<view></view>
				<view></view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import compLoad from '../compLoad/compLoad.vue'
	import compVideo from '../compVideo/compVideo.vue'
	export default {
		name: "indexNotes",
		data() {
			return {
				notesTip: null,
				notesList: null,
				status: false,
			};
		},
		components: {
			compVideo,
			compLoad
		},
		created() {
			// 初始化页面
			this.getData(0)
		},
		watch: {
			paramIndex(val) {
				console.log('数值变化--->', val);
				this.getData(val)
			}
		},
		computed: {
			...mapState(['paramIndex'])
		},
		methods: {
			// ...mapGetters(["getPaIndex"]),
			// reachBottom(){
			// 	let _this = this;
			// 	uni.$on('onReachBottom',function(data){
			// 		console.log('-------触底---',++ _this.pageNum);
			// 		// ++ _this.pageNum
			// 		_this.status = 'loading'
			// 		_this.getData(_this.pageNum)
			// 	})
			// },
			getData(k) {
				this.status = true;
				this.$axios(`home/notes/${k}/20?btmid=[11393964,30854435]`).then(res => {
					console.log(res.result.list)
					if (this.notesList) {
						// console.log('有值---1---')
						this.notesList = this.notesList.concat(res.result.list);
					} else {
						this.notesList = res.result.list;
					}
					if (this.notesTip == null) {
						// console.log('没值---2---');
						this.notesTip = res.result.topics;
					}
					this.status = false
				});
			}
		}
	}
</script>

<style lang="scss">
	.notes_bigBox {
		width: 100%;
		margin-top: 178rpx;
		position: relative;
	}

	// 隐藏滚动条
	.swiper_similar::-webkit-scrollbar {
		display: none;
	}

	.swiper_similar {
		width: 100%;
		height: 130rpx;
		padding: 16rpx 0;
		// overflow-y: scroll;
		overflow: auto;
		background-color: #fff;

		.block_similar {
			width: 92%;
			height: 100%;
			margin: 0 auto;
			display: flex;
			flex-direction: column;

			.similar {
				width: 180%;
				height: 50%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.similar_txt {
					// width: 100%;
					display: flex;
					align-items: center;
					padding: 10rpx 20rpx;
					background-color: #F3F9FA;
					border-radius: 40rpx;

					.item_name {
						// flex: 1;
						// height: 30rpx;
						font-size: 20rpx;
						color: #5599A3;
					}

					.img {
						width: 20rpx;
						height: 20rpx;
					}
				}
			}

			// css 伪类选择器
			// .border_next .similar_txt:nth-last-child .item_name{
			// 	color: #f00;
			// }
		}

	}

	
</style>
